<template>
  <view class="content">
    <text class="success-icon"></text>
    <view class="info">
      <view class="v1"><text class="tit iconfont icon-fail"></text></view>
      <view class="v2">
        <text class="price"><text style="font-size: 40rpx;">¥</text>{{ price }}</text>
      </view>
      <view class="v3">
        <text class="">订单支付失败</text>
      </view>
      <!-- <view class="flex_center">
        <u-count-down @change="onChange" :time="time" format="HH:mm:ss">
          <view class="time">
            <text class="time__item">{{ timeData.hours > 10 ? timeData.hours : '0' + timeData.hours }}&nbsp;时</text>
            <text class="time__item">{{ timeData.minutes }}&nbsp;分</text>
            <text class="time__item">{{ timeData.seconds }}&nbsp;秒</text>
          </view>
        </u-count-down>
        <text>后关闭订单</text>
      </view> -->
    </view>

    <view class="btn-group">
      <view @click="goPageIndex" class="mix-btn hollow">返回首页</view>
      <navigator :url="orderUrl" open-type="redirect" class="mix-btn">重新支付</navigator>
    </view>
  </view>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  data () {
    return {
      orderUrl: '',
      timeData: {},
      outTradeNo: null,
      price: '',
      endTime: null,
      type: null
    };
  },
  onLoad (options) {
    console.log('===================支付失败', options)
    this.outTradeNo = options.outTradeNo; //订单号
    this.price = options.price;
    this.endTime = options.endTime;
    this.type = options.type;
    console.log(options.endTime, 'endtime')
    this.orderUrl = `/pages/money/pay?outTradeNo=${this.outTradeNo}&price=${this.price}&endTime=${this.endTime}&type=${this.type}`;
    if (this.endTime) this.coutTimeOver(this.endTime)
  },
  methods: {
    ...mapMutations('common', ['SET_TABBAR']),
    goPageIndex () {
      this.SET_TABBAR(0)
      uni.switchTab({
        url: '/pages/index/index'
      });
    },
    //倒计时
    onChange (e) {
      if (e.days == 0 && e.hours == 0 && e.minutes == 0 && e.seconds == 0) {
        //倒计时结束
        if (this.timeOverModal) return;
        this.timeOverModal = true;
        uni.showModal({
          title: '提示',
          content: '未及时支付，订单已失效',
          confirmText: '确定',
          showCancel: false,
          success: res => {
            if (res.confirm) {
              this.goBack();
            }
          }
        });
      }
      this.timeData = e;
    },
    //计算倒计时时间
    coutTimeOver (endTime) {
      if (endTime) {
        console.log(endTime, 'aaaaaaaaaaaaaaa')
        // 当前系统时间 
        let NowTime = new Date()
        let t = endTime - NowTime.getTime()
        this.time = t
        console.log('this.time', this.time)
      }
    },
  }
};
</script>

<style lang="scss">
.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.success-icon {
  font-size: 160rpx;
  color: $base-color;
  margin-top: 100rpx;
}
.tit {
  font-size: 38rpx;
  color: #ff473d;
}
.btn-group {
  width: 550rpx;
  display: flex;
  justify-content: space-evenly;
  padding-top: 100rpx;
}
.mix-btn {
  margin-top: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 224rpx;
  height: 80rpx;
  font-size: $font-lg;
  color: #fff;
  background-color: $base-color;
  border-radius: 40rpx;
  &.hollow {
    background: #fff;
    color: #303133;
    border: 1px solid #ccc;
  }
}
.info {
  text-align: center;
  .v2 {
    margin-top: 0rpx;
    .price {
      font-size: 56rpx;
      font-family: DIN-Medium, DIN;
      font-weight: 500;
      color: #121212;
      line-height: 56rpx;
    }
  }
  .v3 {
    text {
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 28rpx;
    }
  }
  .flex_center {
    margin-top: 15rpx;
    text {
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 28rpx;
    }
  }
}
</style>
